<template>
    <div>
        <ul>
            <li v-for="item in data" :key="item">
                <input @click="itemChange(item.name)" type="checkbox" :checked="item.isCheck"/>
                <span>{{item.name}}</span>
            </li>
        </ul>
    </div>
</template>

<script setup>
// 解构
let {data} = defineProps(['data'])
let emit = defineEmits(['itemChange'])

// 修改了任务的勾选状态时, 需要通知父组件, 右父组件修改数据源
// 监听checkbox 的change事件
function itemChange(name){
    //1. 拿到父元素, 再拿到兄弟元素的内容 (任务名称)  --(不推荐)
    // let itemChecked = e.target.checked
    
    //2. 函数的参数直接传递任务名称
    console.log("改变状态的任务名称", name);
    // 通知父组件 任务名称  任务的勾选状态
    emit('itemChange', name)
}
</script>

<style  scoped>
li{
    text-decoration: none;
    padding-left: 0px;
}
ul{
    /* 删除ul的默认样式, item前面的远点 */
    list-style-type: none;
    /* 删除ul的默认样式 */
    padding-left: 0px;
}
</style>